<template>
  <el-card>
      <el-button @click="$router.push('/guan/add')" type="primary" icon="el-icon-circle-plus-outline">新增</el-button>
      <el-divider></el-divider>
    <el-table :data="list">
        <!-- 这个prop没有的话，就没有数据 ，即便你el-table动态绑定了数据模型 -->
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="username" label="账号"></el-table-column>
      <el-table-column prop="rolename" label="角色名称"></el-table-column>
      <el-table-column prop="status" label="状态">
        <template v-slot="$props">
          <el-tag v-if="$props.row.status === 1">正常</el-tag>
          <el-tag v-else>禁用</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template v-slot="scope">
            <el-button
          type="success"
          circle
          size="mini"
          icon="el-icon-edit"
          @click="$router.push('/guan/'+scope.row.uid)"
        ></el-button>
        <el-button
          type="danger"
          circle
          size="mini"
          icon="el-icon-delete"
          @click="del(scope.row.uid)"
        ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @current-change="pageChange" :page-size="size" background layout="prev, pager, next" :total="total">
    </el-pagination>
  </el-card>
</template>

<script>
// 引入管理员相关的数据
import { getAdminList ,getAdminTotal} from "../../request/guan";
export default {
  data() {
    return {
      list: [],
      page: 1, //当前显示的页面
      size: 1, //每页的数据条数
      total:0
    };
  },
  methods: {
      del(id){
        this.$confirm(()=>{
          // 删除
          this.$http.post('/api/userdelete',{uid}).then(res=>{
            if(res.code===200){
              const index=this.list.findIndex(item=>item.id===id)
              this.list.splice(index,1)
              this.$success('删除成功')
            }else{
              this.$error('删除失败')
            }
          })
        })
      },
    //   页面改变
    // pageChange是组件库的一个事件函数
      pageChange(page){
          //page是它自动注入的形参，它会告诉你当前的页码是多少
        //   1：更新页码
        this.page=page  //容器里的page=点击时的当前页码
        // 2：重新请求数据实现点击后的刷新
        this.getAdminList()

      },
    async getAdminList() {
      const list = await getAdminList(this.page, this.size);
      if (list) {
        // 从接口拿数据渲染
        this.list = list;
      }
    },
    // 用于页面切换的total
    async getAdminTotal() {
      const list = await getAdminTotal();
      if (list) {
        // 由于打印出来的list是一个数组，数组中有一个total，所以直接this.total=total是拿不到的且控制台会报错
        // total is not defind
        this.total = list[0].total;
      }
    }
  },
  created() {
    this.getAdminList();
    this.getAdminTotal()
  },
};
</script>

<style>
</style>